<!doctype html>
<html lang="en">

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta charset="UTF-8">
		<title>CSS3 Gradient</title>
		<style type="text/css">
			body {
				background-color: #eee;
			}
			.container {
				width: 100%;
				margin: 0 auto;
			}
			.container header {
				text-align: center;
				font-size: 30px;
				padding: 20px 0;
				color: #e50;
				text-shadow: 0 2px white;
			}
			.container header p {
				font-size: 12px;
				color: #999;
				text-shadow: none;
			}
			.container div {
				width: 100px;
				height: 80px;
				margin: 10px;
				float: left;
				border-radius: 50%;
			}
			/*-----------------------------------------------------------*/
			
			.gradient1 {
				background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
				background-color: #ace;
				background-size: 10px 10px;
			}
			.gradient2 {
				background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #91c32e), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, #91c32e), color-stop(.75, #91c32e), color-stop(.75, transparent), to(transparent));
				background-size: 4px 4px;
				background-color: #79b023;
			}
			.gradient3 {
				background-image: -webkit-gradient( linear, left top, right top, color-stop(0.5, rgba(255, 255, 255, .2)), color-stop(0.5, transparent), to(transparent));
				background-color: #ace;
				background-size: 10px 100%;
			}
			.gradient4 {
				background-image: -webkit-gradient( linear, 0 0, 100% 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
				background-color: #ace;
				background-size: 20px 20px;
			}
			.gradient5 {
				background-image: -webkit-gradient( linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.75, transparent), color-stop(.75, rgba(255, 255, 255, .2))), -webkit-gradient( linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.75, transparent), color-stop(.75, rgba(255, 255, 255, .2)));
				background-color: #ace;
				background-size: 20px 20px;
			}
			.gradient6 {
				background-image: -webkit-gradient( linear, 0 100%, 100% 0, color-stop(.25, #91c32e), color-stop(.25, transparent), color-stop(.75, transparent), color-stop(.75, #91c32e)), -webkit-gradient( linear, 0 100%, 100% 0, color-stop(.25, #91c32e), color-stop(.25, transparent), color-stop(.75, transparent), color-stop(.75, #91c32e));
				background-position: 0 0, 1px 1px;
				background-color: #79b023;
				background-size: 3px 3px;
			}
			.gradient7 {
				background-image: -webkit-gradient( linear, center top, center bottom, color-stop(0.1, #91c32e), color-stop(0.1, transparent), to(transparent));
				background-size: 100% 20px;
				background-color: #79b023;
			}
			.gradient8 {
				background-image: -webkit-gradient( linear, 0 0, 0 100%, color-stop(0.5, rgba(121, 176, 35, 0.5)), color-stop(0.5, transparent), to(transparent)), -webkit-gradient( linear, 0 0, 100% 0, color-stop(0.5, rgba(121, 176, 35, 0.5)), color-stop(0.5, transparent), to(transparent));
				background-color: #fff;
				background-size: 20px 20px;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<header>CSS3 渐变实现斜线背景
				<p>只写了webkit语法，请用chrome浏览</p>
			</header>
			<div class="gradient1"></div>
			<div class="gradient3"></div>
			<div class="gradient4"></div>
			<div class="gradient5"></div>
			<div class="gradient2"></div>
			<div class="gradient6"></div>
			<div class="gradient7"></div>
			<div class="gradient8"></div>
		</div>
	</body>

</html>